<template>
  <page-wrap
    stay-still
    :bgColor="topBg"
    hideTab
    :dark="false"
    back
    hideSafeArea
    title="活动签到"
  >
    <view class="sign-in">
      <view v-if="!showForm && !showSuccess">
        <button v-if="personId" @click="handleJoin" class="btn-join">
          立即签到
        </button>
        <button
          v-else-if="isAuthSetting"
          open-type="getPhoneNumber"
          class="btn-join"
          :hair-line="false"
          @getphonenumber="getPhoneNumber"
        >
          立即签到
        </button>
        <button
          v-else
          open-type="getUserInfo"
          class="btn-join"
          :hair-line="false"
          @getuserinfo="getUserInfo"
          :loading="getUserInfoLoading"
        >
          立即签到
        </button>
        <view class="apply-bottom">
          <view class="tips" @click="toZph">网络招聘会</view>
          <view class="tips" @click="toQuestion">调研问卷</view>
        </view>
      </view>
      <view class="form" v-if="showForm">
        <view class="form-item">
          <view class="form-item-label">姓名</view>
          <view class="form-item-content">
            <input
              v-model="name"
              class="form-item-input"
              placeholder="请填写姓名"
            />
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-label">学校</view>
          <view class="form-item-content">
            <input
              v-model="school"
              class="form-item-input"
              placeholder="请填写学校名称"
            />
            <!-- <view :class="school ? '' : 'no-data'" @click="schoolShow = true">{{
              school || "请选择学校"
            }}</view>
            <u-select
              v-model="schoolShow"
              :list="schoolOptions"
              mode="single-column"
              @confirm="handleSchoolConfirm"
            /> -->
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-label">学院</view>
          <view class="form-item-content" v-if="school == '深圳技术大学'">
            <view
              :class="college ? '' : 'no-data'"
              @click="handleCollegeClick"
              >{{ college || "请选择学院" }}</view
            >
            <u-select
              v-model="collegeShow"
              :list="collegeOptions"
              value-name="schoolId"
              label-name="schoolName"
              mode="single-column"
              @confirm="handleCollegeConfirm"
            />
          </view>
          <view class="form-item-content" v-else>
            <input
              v-model="college"
              class="form-item-input"
              placeholder="请填写学院名称"
            />
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-label">专业</view>
          <view class="form-item-content" v-if="school == '深圳技术大学'">
            <view :class="major ? '' : 'no-data'" @click="handleMajorClick">{{
              major || "请选择专业"
            }}</view>
            <u-select
              v-model="majorShow"
              :list="majorOptions"
              value-name="zyeId"
              label-name="zye"
              mode="single-column"
              @confirm="handleMajorConfirm"
            />
          </view>
          <view class="form-item-content" v-else>
            <input
              v-model="major"
              class="form-item-input"
              placeholder="请填写专业名称"
            />
          </view>
        </view>
        <view class="btn-submit" @click="handleSubmit">立即签到</view>
      </view>
      <view v-if="showSuccess">
        <view class="success text-center">
          <view class="success-title"> 签到成功 </view>
          <view class="success-label">请向工作人员出示此页面，有序入场</view>
          <view class="user-info">
            <view>姓名：{{ name }}</view>
            <view>学校：{{ school }}</view>
            <view v-if="college">学院：{{ college }}</view>
            <view>专业：{{ major }}</view>
          </view>
        </view>
        <view class="apply-bottom">
          <view class="tips" @click="toZph">网络招聘会</view>
          <view class="tips" @click="toQuestion">调研问卷</view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>
<script>
import WxLoginMixin from "@/mixins/wxLogin";
import { checkEnrollAndSign, dealEnrollAndSign } from "@/api/modules/zph";
import { collegeList } from "../utils/data";

export default {
  mixins: [WxLoginMixin],
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      topBg: `url(${this.$imgBaseSelf}home/top_bg.png)`,
      showForm: false,
      name: "",
      school: "",
      schoolShow: false,
      schoolOptions: [
        { value: "1", label: "深圳技术大学" },
        { value: "2", label: "其他" },
      ],
      college: "",
      collegeShow: false,
      collegeOptions: collegeList,
      major: "",
      majorShow: false,
      majorOptions: [],
      activityId: "1931748078442873", // 招聘会id
      showSuccess: false,
      guideUrl: `${this.$imgBaseSelf}zph/2025/shenzhenjishu/【入校指引】“百万英才汇南粤”2025年深圳技术大学春季校园招聘会.pdf`,
    };
  },
  created() {
    this.checkAuthSetting();
  },
  methods: {
    checkEnroll() {
      uni.showLoading();
      const params = {
        activity_id: this.activityId,
        person_id: this.personId,
      };
      checkEnrollAndSign(params).then((res) => {
        uni.hideLoading();
        //200 报名成功未签到  201报名成功已签到 //400 未报名活动
        if (res.code == 200) {
          this.name = res.data.name;
          this.school = res.data.school;
          this.major = res.data.major;
          this.college = res.data.college;
          //调取签到接口
          this.apply();
        } else if (res.code == 201) {
          this.name = res.data.name;
          this.school = res.data.school;
          this.major = res.data.major;
          this.college = res.data.college;
          this.showForm = false;
          this.showSuccess = true;
        } else if (res.code == 400) {
          this.showForm = true;
        } else {
          uni.showToast({
            icon: "none",
            title: res.status_desc,
          });
        }
      });
    },
    handleJump(personId) {
      // WxLoginMixin
      this.personId = personId;
      this.checkEnroll();
    },
    apply() {
      uni.showLoading();
      const params = {
        conditionArr: JSON.stringify({
          is_sign: 1, //1 传1表示签到
          activity_id: this.activityId,
          person_id: this.personId,
          name: this.name,
          school: this.school,
          major: this.major,
          college: this.college,
        }),
      };
      dealEnrollAndSign(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          this.showForm = false;
          this.showSuccess = true;
        } else {
          uni.showToast({
            icon: "none",
            title: res.status_desc,
          });
        }
      });
    },
    handleJoin() {
      this.checkEnroll();
    },
    handleSubmit() {
      if (!this.name) {
        uni.showToast({
          title: "请填写姓名",
          icon: "none",
          duration: 2000,
        });
      } else if (!this.school) {
        uni.showToast({
          title: "请选择学校",
          icon: "none",
          duration: 2000,
        });
      } else if (!this.college) {
        uni.showToast({
          title:
            this.school == "深圳技术大学" ? "请选择学院" : "请填写学院名称",
          icon: "none",
          duration: 2000,
        });
      } else if (!this.major) {
        uni.showToast({
          title:
            this.school == "深圳技术大学" ? "请选择专业" : "请填写专业名称",
          icon: "none",
          duration: 2000,
        });
      } else {
        this.apply();
      }
    },

    openGuide() {
      // 打开交通指引pdf文件
      uni.showLoading({
        title: "加载中...",
      });
      wx.downloadFile({
        url: this.guideUrl,
        success: function (res) {
          let filePath = res.tempFilePath;
          wx.openDocument({
            filePath: filePath,
            fileType: "pdf",
            success: function () {
              uni.hideLoading();
            },
            fail: function () {
              uni.hideLoading();
            },
          });
          uni.hideLoading();
        },
        fail: function (res) {
          uni.showLoading({
            title: res,
          });
        },
      });
    },
    viewCompany() {
      wx.navigateToMiniProgram({
        appId: "wxd45c635d754dbf59",
        path: `pages/detail/detail?url=${encodeURIComponent(
          "https://docs.qq.com/sheet/DU2xHU3VYcFVZWmpS?tab=BB08J2"
        )}`,
        envVersion: "release",
        success(res) {
          console.log("跳转成功");
        },
        fail(err) {
          console.error("跳转失败", err);
        },
      });
    },
    getCareerCard() {
      uni.navigateTo({
        url: "/pagesSub/userCenter/careerPathV2/index",
      });
    },
    handleSchoolConfirm(e) {
      this.school = e[0].label;
      if (this.school) {
        this.college = "";
        this.major = "";
      }
    },
    handleCollegeClick() {
      if (this.school && this.school == "深圳技术大学") {
        this.collegeShow = true;
      } else {
        uni.showToast({
          title: "请选择学校",
          icon: "none",
          duration: 2000,
        });
        this.collegeShow = false;
      }
    },
    handleCollegeConfirm(e) {
      this.college = e[0].label;
      const arr = this.collegeOptions.filter(
        (item) => item.schoolName == this.college
      );
      this.majorOptions = arr[0].childList;
      if (this.majorOptions.length > 0) {
        this.major = this.majorOptions[0].zye;
      }
    },
    handleMajorClick() {
      if (this.college) {
        this.majorShow = true;
      } else {
        uni.showToast({
          title: "请选择学院",
          icon: "none",
          duration: 2000,
        });
        this.majorShow = false;
      }
    },
    handleMajorConfirm(e) {
      this.major = e[0].label;
    },
    toZph() {
      uni.navigateTo({
        url: '/pagesSub/careerGrow/zph/detail?activityId=1931748078442873'
      })
    },
    toQuestion() {
      uni.navigateToMiniProgram({
        appId: 'wxd947200f82267e58',
        path: 'pages/wjxqList/wjxqList?activityId=exTZxUk',
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.sign-in {
  height: 1450rpx;
  padding-top: 480rpx;
  background-image: url($img-base + "zph/sxh/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.btn-join {
  margin: 0 auto;
  width: 300rpx;
  height: 300rpx;
  line-height: 300rpx;
  font-weight: 600;
  font-size: 44rpx;
  color: #ffffff;
  border-radius: 50%;
  background: linear-gradient(180deg, #4abcd4 0%, #2851f9 100%);
  box-shadow: 0px 0px 0px 10rpx rgba(255, 255, 255, 0.6),
    inset 0px 0px 40rpx 0px rgba(255, 255, 255, 0.42);

  &::after {
    content: none;
  }
}
.no-data {
  font-size: 30rpx;
  color: #888888;
}
.apply-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.tips {
  color: #fff;
  font-size: 32rpx;
  padding: 26rpx 80rpx;
  margin-top: 60rpx;
  border-radius: 120rpx;
  background: -webkit-linear-gradient(top, #3cdbff 0%, #1c59ff 100%);
  background: linear-gradient(180deg, #3cdbff 0%, #1c59ff 100%);
  box-shadow: inset 0px 0px 70px 0px rgba(255, 255, 255, 0.6);
}

.form {
  margin: 0 auto;
  width: 686rpx;
  padding: 65rpx 50rpx 44rpx;
  background-color: #ffffff;
  background: linear-gradient(180deg, #daecfe 0%, #ffffff 50rpx);
  border-radius: 24rpx;
  border: 1rpx solid #979797;

  &-item {
    display: flex;
    margin-bottom: 48rpx;

    &-label {
      width: 78rpx;
      line-height: 42rpx;
      font-size: 30rpx;
      color: #333333;
    }

    &-content {
      flex: 1;
      padding-bottom: 12rpx;
      overflow: hidden;
      border-bottom: 2rpx solid #979797;
    }

    &-input {
      font-size: 30rpx;
    }

    ::v-deep .input-placeholder {
      color: #888888;
    }
  }

  .btn-submit {
    margin-top: 72rpx;
    width: 586rpx;
    font-size: 32rpx;
    line-height: 80rpx;
    color: #ffffff;
    text-align: center;
    background-color: #1b74f4;
    border-radius: 14rpx;
  }
}

.success {
  margin: 0 auto;
  width: 686rpx;
  padding: 65rpx 50rpx 44rpx;
  background-color: #ffffff;
  background: linear-gradient(180deg, #daecfe 0%, #ffffff 50rpx);
  border-radius: 24rpx;
  border: 1rpx solid #979797;
  text-align: center;

  &-title {
    font-size: 36rpx;
  }

  &-label {
    margin: 24rpx 0;
    font-size: 24rpx;
  }

  .user-info {
    font-size: 28rpx;
    color: #aaaaaa;
    line-height: 2;
  }
}
</style>
